<template>
  <div class="form-item col-1">
    <div class="wrapper">
      <a-button type="primary" style="width: 310px" @click="visible = true">
        点击添加
      </a-button>
      <draggable
          tag="div" class="tab-box"
          :list="tab_list"
          v-bind="dragOptions">

        <div class="tab-item" :class="[tab_active == item.id?'active':'']" v-for="item in tab_list" :key="item.id"
             @click="chooseIt(item)">
          <span>{{item.component}}</span><span class="close">
          <a-icon class="icon-close11" type="close-circle" @click.stop="deleteIt(item.id)"/></span>
        </div>

      </draggable>

      <div style="margin-top: 10px" v-if="current_tab.id">
        <div class="title-box">
          <span style="flex: 0 0 100px">选项模块</span><span style="flex: 1;">{{current_tab.component}}</span>
        </div>
        <div class="title-box">
          <span style="flex: 0 0 100px;align-self: center">选项名称</span>
          <span style="flex: 1;"><a-input placeholder="选项名称" style="width: 200px" v-model.trim="current_tab.name"/></span>
        </div>
        <div style="margin-top: 15px">
          <!-- 数据配置界面 -->
          <template-config-detail
              :layout="current_tab.layout"
              :configs="current_tab.datas"
              :rootConfig="current_tab.datas"
              type="datas"
              key="datas">
          </template-config-detail>
        </div>
      </div>
    </div>

    <a-modal v-model="visible" title="选择组件" @ok="handleOk">
      <a-radio-group v-model="choose_type">
        <a-radio :style="radioStyle" :value="'1'" v-if="component_list.indexOf('U_article') > -1">
          文章组件
        </a-radio>
        <a-radio :style="radioStyle" :value="'2'">
          商品组
        </a-radio>
        <a-radio :style="radioStyle" :value="'3'" v-if="component_list.indexOf('U_goodsrush') > -1">
          限时抢购
        </a-radio>
        <a-radio :style="radioStyle" :value="'4'" v-if="component_list.indexOf('U_goodsgroup') > -1">
          拼团
        </a-radio>
        <a-radio :style="radioStyle" :value="'5'" v-if="component_list.indexOf('U_goodsnearby') > -1">
          附近商品
        </a-radio>
        <a-radio :style="radioStyle" :value="'6'">
          单图
        </a-radio>
        <a-radio :style="radioStyle" :value="'7'">
          图片组合
        </a-radio>
        <a-radio :style="radioStyle" :value="'8'" v-if="component_list.indexOf('U_livestreaming') > -1">
          带货直播
        </a-radio>
        <a-radio :style="radioStyle" :value="'9'" v-if="component_list.indexOf('U_shortvideo') > -1">
          短视频
        </a-radio>
        <a-radio :style="radioStyle" :value="'10'" v-if="component_list.indexOf('U_community') > -1">
          微社区
        </a-radio>
        <a-radio :style="radioStyle" :value="'11'" v-if="component_list.indexOf('U_lottery') > -1">
          幸运大转盘
        </a-radio>
        <a-radio :style="radioStyle" :value="'12'" v-if="component_list.indexOf('U_stores') > -1">
          门店
        </a-radio>
		<a-radio :style="radioStyle" :value="'13'" v-if="component_list.indexOf('U_ywmgroup') > -1">
          新拼团
        </a-radio>
		<a-radio :style="radioStyle" :value="'14'" v-if="component_list.indexOf('U_button') > -1">
          按钮组
        </a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>

<script>
	import draggable from 'vuedraggable';
	// 配置项编译器
	// import templateConfigDetail from '../template-config-detail.vue';

	export default {
		components: {
			draggable,
			// templateConfigDetail
		},

		props: ['value', 'config', 'rootConfig'],

		data() {
			return {
				current_ids: [], //现在已经添加过的id
				visible: false,
				tab_active: '', //当前选择的选项卡
				// tab_list: [],  //选项卡列表
				choose_type: '',
				current_tab: {},
				radioStyle: {
					display: 'block',
					height: '30px',
					lineHeight: '30px',
				},
				dragOptions: {
					animation: 200, // 动画时间
					group: "description",
					disabled: false,
					ghostClass: "sortable-ghost",
					dragClass: "sortable-drag",
					filter: ".ignore-elements"
				},
			}
		},

		computed: {
			tab_list: {
				get() {
					this.current_ids = [];
					if(this.value.length > 0) {
						this.value.map((item)=>{
							this.current_ids.push(item.id);
							item.remote_data = this.handle_data(item.datas)
							if(item.active) {
								this.current_tab = item;
								this.tab_active = item.id;
							}
						});
					}else {
						this.current_tab = {};
						this.tab_active = '';
					}

					return this.value;
				},
				set(newValue) {
					this.$emit('input', newValue);
				}
			},
			component_list() {
				return this.$store.state.design.component_list.componentList || []
      }
		},
    mounted() {},
		methods: {
			/**
			 * 处理数据
			 * @param {String} datas
			 * **/
			handle_data(datas) {
				let handleDatas = {};
				if(datas) {
					Object.keys(datas).map(key => {
						handleDatas[key] = datas[key].value;
					});
        }
				return handleDatas;
			},
			chooseIt(item) {
				for (let i = 0; i < this.tab_list.length; i++) {
					if(this.tab_list[i].id == item.id) {
						this.tab_list[i].active = true;
          }else {
						this.tab_list[i].active = false;
          }
				}
				this.current_tab = item;
				this.tab_active = item.id;
			},
			deleteIt(id) {
				for (let i = 0; i < this.tab_list.length; i++) {
					if (this.tab_list[i].id == id) {
						this.tab_list.splice(i, 1);
					}
					if (this.current_tab.id == id) {
						this.current_tab = {};
						if (this.tab_list.length >= 1) {
							this.tab_list[0].active = true;
							this.current_tab = this.tab_list[0];
							this.tab_active = this.tab_list[0].id;
						}
					}
				}
			},
			handleOk(e) {
				let id = this.tab_list.length + 1;
				while (this.current_ids.includes(id)) {
					id += 1;
				}
				this.current_ids.push(id);
				let component = '';
				let datas = {};
				let layout = [];
				let uikey = '';
				switch (this.choose_type) {
					case '1':
						uikey = 'U_article';
						component = '文章组件';
						layout = [
							{
								title: '文章组件设置',
								groups: [
									'show_audio',
									'list',
									'article_style',
									'article_bg',
								]
							},
						];
						datas = {
							show_audio: {
								title: "音频文章是否显示",
								type: "switch",
								value: false
							},
							list: {
								title: "获取方式",
								type: "ustyle",
								value: [],
								show: 'list',
								min: 1,
								max: 100,
								choose: 'article',
								options: [
									{label: "自动获取", value: "1"},
									{label: "手动获取", value: "2"},
									{label: "按分类获取", value: "3"},
								]
							},
							get_style: {
								title: "获取方式",
								type: "radio",
								value: "1",
								options: []
							},
							get_number: {
								title: "显示数量",
								type: 'number',
								value: 10,
								min: 1,
								max: 100
							},
							article_style: {
								title: "文章显示方式",
								type: "radio",
								value: "2",
								options: [
									{label: "居左", value: "1"},
									{label: "居右", value: "2"},
								]
							},
							// article_bg: {
							// 	title: "文章背景颜色",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							article_bg: {
								title: '文章背景颜色',
								type: 'color',
								value: "#ffffff",
							},
						};
						break;
					case '2':
						uikey = 'U_goods';
						component = '商品组';
						layout = [
							{
								title: '样式设置',
								groups: [
									'preview_color',
									'sort_style',
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
									'item_radius',
									'show_shadow',
									'show_border',
									'border_color',
									'font_color',
									'font_size',
									'good_tag',
									'button_type',
									'button_title',
									'button_bg_color',
									'button_color',
									'content_list',
                  'show_price_text',
									'disable_good',
									'get_number'
								]
							},
							{
								title: '商品设置',
								groups: [
									// 'get_number',
									'list'
								]
							},
						];
						datas = {
							// preview_color: {
							// 	title: "背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#F1F1F1",
							},
							sort_style: {
								title: "商品排列样式",
								type: "iconbox",
								value: {
									choose_icon: '2',
								},
								choose: 'single',
								isIcon: true,
								options: [
									{icon: 'icon-ht_goods_onepic', value: '1'},
									{icon: 'icon-ht_goods_twopic', value: '2'},
									{icon: 'icon-ht_goods_vertical', value: '3'},
									{icon: 'icon-ht_goods_three', value: '4'},
									{icon: 'icon-ht_goods_threescroll', value: '5'},
									{icon: 'icon-ht_goods_threepic', value: '6'}
								]
							},
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							item_radius: {
								title: '商品圆角',
								type: 'bar',
								value: 5,
								min: 0,
								max: 50
							},
							show_shadow: {
								title: '投影',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							show_border: {
								title: '显示边框',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							border_color: {
								title: '边框颜色',
								type: 'color',
								value: '#BFB7B7',
							},
							font_color: {
								title: '标题颜色',
								type: 'color',
								value: '#000000',
								showTerminal: 'h5', //控制显示终端
							},
							font_size: {
								title: '标题大小',
								type: 'bar',
								tips: 'PC浏览器默认限制最小字号为12像素',
								value: 12,
								min: 10,
								max: 24,
								showTerminal: 'h5', //控制显示终端
							},
							good_tag: {
								title: '商品属性',
								type: "iconbox",
								tips: '商品属性统一在左上角显示',
								value: {
									choose_icon: '0',
									image: '',
								},
								choose: 'single',
								isIcon: false,
								options: [
									{label: '无', value: '0'},
									{label: '推荐', value: '1'},
									{label: '热销', value: '2'},
									{label: '新上', value: '3'},
									{label: '包邮', value: '4'},
									{label: '限时', value: '5'},
									{label: '自定义', value: '7'}
								]
							},
							button_type: {
								title: '购买按钮样式',
								tips: '选择一排三个商品的排列方式时无法选择样式一或者样式二',
								type: 'radio',
								value: '4',
								options: [
									{label: '无', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
									{label: '样式三', value: '3'},
									{label: '样式四', value: '4'},
									{label: '样式五', value: '5'},
									{label: '样式六', value: '6'},
								]
							},
							button_title: {
								title: '购买按钮文字',
								tips: '按钮文字只在选择有文字的样式时生效',
								type: 'text',
								value: '立即购买'
							},
							button_bg_color: {
								title: '购买按钮背景颜色',
								type: 'color',
								value: '#ff2c29',
							},
							button_color: {
								title: '购买按钮颜色',
								type: 'color',
								value: '#ffffff',
							},
							content_list: {
								title: "内容显示",
								tips: '爱心值和赠送积分只能选一个显示，同时选择时优先显示爱心值',
								type: "checkbox",
								value: ['1','2','3','7'],
								options: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "现价", value: "3"},
									{label: "会员价", value: "4"},
									{label: "爱心值", value: "5"},
									{label: "赠送积分", value: "6"},
									{label: "销量", value: "7"},
									{label: "券后价", value: "8"},
									{label: "爱心值抵扣", value: "9"},
								]
							},
							show_price_text: {
								title: '显示价格文字',
								type: 'switch',
								tips: '只控制券后价，原价，现价，会员价的文字',
								value: false
							},
							disable_good: {
								title: '失效产品',
								type: 'radio',
								value: '0',
								options: [
									{label: '不显示', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
								]
							},
							get_number: {
								title: "商品显示数量",
								tips: "0表示无限制",
								type: 'number',
								value: 0,
								min: 0,
								max: 1000,
								showTerminal: 'h5', //控制显示终端
							},
							list: {
								title: '商品数据',
								tips: '除了单个选择商品可显示商品数据以外 其余都将使用默认商品数据占位，需要查看效果可保存后在移动端预览',
								value: [],
								chooseList: {
									list: [],
									tag: [],
									category: [],
									supplier: [],
									store: [],
									hotel: [],
									property: []
								},
								chooseType: [
									{label: '单个选择', value: 'list'},
									{label: '选择标签', value: 'tag'},
									{label: '选择分类', value: 'category'},
									{label: '供应商', value: 'supplier'},
									{label: '门店', value: 'store'},
									{label: '酒店', value: 'hotel'},
									{label: '商品属性', value: 'property'}
								],
								type: 'goodList',
								choose: 'good'
							},
							goods_type: {
								title: '选择类型',
								type: 'radio',
								value: 'list',
								options: []
							}
						};
						break;
					case '3':
						uikey = 'U_goodsrush';
						component = '限时抢购';
						layout = [
							{
								title: '样式设置',
								groups: [
									'preview_color',
									'sort_style',
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
									'item_radius',
									'show_shadow',
									'show_border',
									'border_color',
									'good_tag',
									'time_color',
									'button_type',
									'button_title',
									'button_bg_color',
									'button_color',
									'content_list',
									'disable_good',
								]
							},
							{
								title: '商品设置',
								groups: [
									// 'get_number',
									'list'
								]
							},
						];
						datas = {
							// preview_color: {
							// 	title: "背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#F1F1F1",
							},
							sort_style: {
								title: "商品排列样式",
								type: "iconbox",
								value: {
									choose_icon: '2',
								},
								choose: 'single',
								isIcon: true,
								options: [
									{icon: 'icon-ht_goods_onepic', value: '1'},
									{icon: 'icon-ht_goods_twopic', value: '2'},
									{icon: 'icon-ht_goods_vertical', value: '3'},
									{icon: 'icon-ht_goods_three', value: '4'},
									{icon: 'icon-ht_goods_threescroll', value: '5'},
									{icon: 'icon-ht_goods_threepic', value: '6'}
								]
							},
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							item_radius: {
								title: '商品圆角',
								type: 'bar',
								value: 5,
								min: 0,
								max: 50
							},
							show_shadow: {
								title: '投影',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							show_border: {
								title: '显示边框',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							border_color: {
								title: '边框颜色',
								type: 'color',
								value: '#BFB7B7',
							},
							good_tag: {
								title: '商品属性',
								type: "iconbox",
								tips: '商品属性统一在左上角显示',
								value: {
									choose_icon: '0',
									image: '',
								},
								choose: 'single',
								isIcon: false,
								options: [
									{label: '无', value: '0'},
									{label: '推荐', value: '1'},
									{label: '热销', value: '2'},
									{label: '新上', value: '3'},
									{label: '包邮', value: '4'},
									{label: '限时', value: '5'},
									{label: '自定义', value: '7'}
								]
							},
							time_color: {
								title: '倒计时文字颜色',
								type: 'color',
								value: '#ff2c29',
							},
							button_type: {
								title: '购买按钮样式',
								tips: '选择一排三个商品的排列方式时无法选择样式一或者样式二',
								type: 'radio',
								value: '4',
								options: [
									{label: '无', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
									{label: '样式三', value: '3'},
									{label: '样式四', value: '4'},
									{label: '样式五', value: '5'},
									{label: '样式六', value: '6'},
								]
							},
							button_title: {
								title: '购买按钮文字',
								tips: '按钮文字只在选择有文字的样式时生效',
								type: 'text',
								value: '立即抢购'
							},
							button_bg_color: {
								title: '购买按钮背景颜色',
								type: 'color',
								value: '#ff2c29',
							},
							button_color: {
								title: '购买按钮颜色',
								type: 'color',
								value: '#ffffff',
							},
							content_list: {
								title: "内容显示",
								type: "checkbox",
								value: ['1','2','3'],
								options: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "现价", value: "3"},
								]
							},
							disable_good: {
								title: '失效产品',
								type: 'radio',
								value: '0',
								options: [
									{label: '不显示', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
								]
							},
							// get_number: {
							// 	title: "商品显示数量",
							// 	type: 'number',
							// 	value: 1,
							// 	min: 1,
							// 	max: 100
							// },
							list: {
								title: '商品数据',
								value: [],
								chooseList: {
									rush: [],
								},
								chooseType: [
									{label: '选择限时抢购', value: 'rush'},
								],
								hasStore: 1,//支持门店装修
								type: 'goodList',
								choose: 'rush'
							},
							goods_type: {
								title: '选择类型',
								type: 'radio',
								value: 'rush',
								options: []
							}
						};
						break;
					case '4':
						uikey = 'U_goodsgroup';
						component = '拼团';
						layout = [
							{
								title: '样式设置',
								groups: [
									'preview_color',
									'sort_style',
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
									'item_radius',
									'show_shadow',
									'show_border',
									'border_color',
									'good_tag',
									'button_type',
									'button_title',
									'button_bg_color',
									'button_color',
									'content_list',
									'disable_good',
								]
							},
							{
								title: '商品设置',
								groups: [
									// 'get_number',
									'list'
								]
							},
						];
						datas = {
							// preview_color: {
							// 	title: "背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#F1F1F1",
							},
							sort_style: {
								title: "商品排列样式",
								type: "iconbox",
								value: {
									choose_icon: '2',
								},
								choose: 'single',
								isIcon: true,
								options: [
									{icon: 'icon-ht_goods_onepic', value: '1'},
									{icon: 'icon-ht_goods_twopic', value: '2'},
									{icon: 'icon-ht_goods_vertical', value: '3'},
									{icon: 'icon-ht_goods_three', value: '4'},
									{icon: 'icon-ht_goods_threescroll', value: '5'},
									{icon: 'icon-ht_goods_threepic', value: '6'}
								]
							},
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							item_radius: {
								title: '商品圆角',
								type: 'bar',
								value: 5,
								min: 0,
								max: 50
							},
							show_shadow: {
								title: '投影',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							show_border: {
								title: '显示边框',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							border_color: {
								title: '边框颜色',
								type: 'color',
								value: '#BFB7B7',
							},
							good_tag: {
								title: '商品属性',
								type: "iconbox",
								tips: '商品属性统一在左上角显示',
								value: {
									choose_icon: '0',
									image: '',
								},
								choose: 'single',
								isIcon: false,
								options: [
									{label: '无', value: '0'},
									{label: '推荐', value: '1'},
									{label: '热销', value: '2'},
									{label: '新上', value: '3'},
									{label: '包邮', value: '4'},
									{label: '限时', value: '5'},
									{label: '自定义', value: '7'}
								]
							},
							button_type: {
								title: '购买按钮样式',
								tips: '选择一排三个商品的排列方式时无法选择样式一或者样式二',
								type: 'radio',
								value: '4',
								options: [
									{label: '无', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
									{label: '样式三', value: '3'},
									{label: '样式四', value: '4'},
									{label: '样式五', value: '5'},
									{label: '样式六', value: '6'},
								]
							},
							button_title: {
								title: '购买按钮文字',
								tips: '按钮文字只在选择有文字的样式时生效',
								type: 'text',
								value: '去开团'
							},
							button_bg_color: {
								title: '购买按钮背景颜色',
								type: 'color',
								value: '#ff2c29',
							},
							button_color: {
								title: '购买按钮颜色',
								type: 'color',
								value: '#ffffff',
							},
							content_list: {
								title: "内容显示",
								type: "memberCheckbox",
								from: 'group_data',
								options: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "拼团价", value: "3"},
									{label: "拼团中列表（滚动）", value: "6"}
								],
								value: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "拼团价", value: "3"},
								],
								urls: [],
							},
							disable_good: {
								title: '失效产品',
								type: 'radio',
								value: '0',
								options: [
									{label: '不显示', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
								]
							},
							// get_number: {
							// 	title: "商品显示数量",
							// 	type: 'number',
							// 	value: 1,
							// 	min: 1,
							// 	max: 100
							// },
							list: {
								title: '商品数据',
								value: [],
								chooseList: {
									group: [],
								},
								chooseType: [
									{label: '选择拼团', value: 'group'},
								],
								hasStore: 1,//支持门店装修
								type: 'goodList',
								choose: 'group'
							},
							goods_type: {
								title: '选择类型',
								type: 'radio',
								value: 'group',
								options: []
							}
						};
						break;
					case '5':
						uikey = 'U_goodsnearby';
						component = '附近商品';
						layout = [
							{
								title: '样式设置',
								groups: [
									'preview_color',
									'sort_style',
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
									'item_radius',
									'show_shadow',
									'show_border',
									'border_color',
									'font_color',
									'font_size',
									'good_tag',
									'button_type',
									'button_title',
									'button_bg_color',
									'button_color',
									'content_list',
									// 'disable_good',
								]
							},
							{
								title: '商品设置',
								groups: [
									'get_number',
									'show_location'
								]
							},
						];
						datas = {
							// preview_color: {
							// 	title: "背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#F1F1F1",
							},
							sort_style: {
								title: "商品排列样式",
								type: "iconbox",
								value: {
									choose_icon: '2',
								},
								choose: 'single',
								isIcon: true,
								options: [
									{icon: 'icon-ht_goods_onepic', value: '1'},
									{icon: 'icon-ht_goods_twopic', value: '2'},
									{icon: 'icon-ht_goods_vertical', value: '3'},
									{icon: 'icon-ht_goods_three', value: '4'},
									{icon: 'icon-ht_goods_threescroll', value: '5'},
									{icon: 'icon-ht_goods_threepic', value: '6'}
								]
							},
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							item_radius: {
								title: '商品圆角',
								type: 'bar',
								value: 5,
								min: 0,
								max: 50
							},
							show_shadow: {
								title: '投影',
								type: 'switch',
								value: false
							},
							show_border: {
								title: '显示边框',
								tips: '只在大图和横排排列样式下实现',
								type: 'switch',
								value: false
							},
							border_color: {
								title: '边框颜色',
								type: 'color',
								tips: '只在大图和横排排列样式下实现',
								value: '#333333',
							},
							font_color: {
								title: '标题颜色',
								type: 'color',
								value: '#000000',
								showTerminal: 'h5', //控制显示终端
							},
							font_size: {
								title: '标题大小',
								type: 'bar',
								tips: 'PC浏览器默认限制最小字号为12像素',
								value: 12,
								min: 10,
								max: 24,
								showTerminal: 'h5', //控制显示终端
							},
							good_tag: {
								title: '商品属性',
								type: "iconbox",
								tips: '商品属性统一在左上角显示',
								value: {
									choose_icon: '0',
									image: '',
								},
								choose: 'single',
								isIcon: false,
								options: [
									{label: '无', value: '0'},
									{label: '推荐', value: '1'},
									{label: '热销', value: '2'},
									{label: '新上', value: '3'},
									{label: '包邮', value: '4'},
									{label: '限时', value: '5'},
									{label: '自定义', value: '7'}
								]
							},
							button_type: {
								title: '购买按钮样式',
								tips: '选择一排三个商品的排列方式时无法选择样式一或者样式二',
								type: 'radio',
								value: '4',
								options: [
									{label: '无', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
									{label: '样式三', value: '3'},
									{label: '样式四', value: '4'},
									{label: '样式五', value: '5'},
									{label: '样式六', value: '6'},
								]
							},
							button_title: {
								title: '购买按钮文字',
								tips: '按钮文字只在选择有文字的样式时生效',
								type: 'text',
								value: '立即购买'
							},
							button_bg_color: {
								title: '购买按钮背景颜色',
								type: 'color',
								value: '#ff2c29',
							},
							button_color: {
								title: '购买按钮颜色',
								type: 'color',
								value: '#ffffff',
							},
							content_list: {
								title: "内容显示",
								tips: '爱心值和赠送积分只能选一个显示，同时选择时优先显示爱心值',
								type: "checkbox",
								value: ['1','2','3','7'],
								options: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "现价", value: "3"},
									{label: "会员价", value: "4"},
									{label: "爱心值", value: "5"},
									{label: "赠送积分", value: "6"},
									{label: "销量", value: "7"},
								]
							},
							disable_good: {
								title: '失效产品',
								type: 'radio',
								value: '0',
								options: [
									{label: '不显示', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
								]
							},
							get_number: {
								title: "商品显示数量",
								type: 'number',
								value: 10,
								min: 1,
								max: 100
							},
							show_location: {
								title: '显示距离',
								type: 'switch',
								value: true
							},
							list: {
								title: '商品数据',
								value: [],
								chooseList: {
									nearby: [],
								},
								chooseType: [
									{label: '选择商品', value: 'nearby'},
								],
								type: 'goodList',
								choose: 'nearby'
							},
							goods_type: {
								title: '选择类型',
								type: 'radio',
								value: 'nearby',
								options: []
							}
						};
						break;
					case '6':
						uikey = 'U_simplegraph';
						component = '单图';
						layout = [
							{
								title: '单图组件设置',
								groups: [
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
									'picture_border',
									'list'
								]
							}
						];
						datas = {
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							picture_border: {title: '图片圆角', type: 'bar', value: 0, min: 0, max: 100},
							list: {
								title: "添加单图",
								type: "list",
								notShowText: true,
								// notShow: true,
								hotArea: true,
								choose_title: {
									choose_option: [
										{label: "普通样式", value: "2"},
										{label: "绘制热区", value: "3"},
									]
								},
								value: []
							},
							choose_style: {
								title: '选择方式',
								type: 'radio',
								value: '2',
								options: []
							},
						};
						break;
					case '7':
						uikey = 'U_cube';
						component = '图片组合';
						layout = [
							{
								title: '图片组合配置',
								groups: [
									'picture',
									'preview_color',
									'margin',
								]
							},
						];
						datas = {
							picture: {
								title: '图片设置',
								type: "cube",
								value: {
									density: 4,
									icon: '1',
									cudeSelected: []
								}
							},
							preview_color: {
								title: "背景颜色",
								type: 'color',
								value: '#ffffff',
							},
							margin: {
								title: "图片间隙",
								type: "bar",
								no_show_px: true,
								value: 0,
								min: 0,
								max: 30,
							},
							// 只用于显示
							currentItem: {
								title: '当前选择的方格',
								type: 'chooseItem',
								value: {}
							},
							selectedArr: {
								title: '当前选中的方格',
								type: 'chooseList',
								value: []
							},
							currentItemId: {
								title: '当前选择的方格ID',
								type: 'text',
								value: ""
							},
						};
						break;
					case '8':
						uikey = 'U_livestreaming';
						component = '带货直播';
						layout = [
							{
								title: '带货直播组件设置',
								groups: [
									'get_number',
									'preview_color',
								]
							},
						];
						datas = {
							get_number: {
								title: "直播间显示数量",
								type: 'number',
								value: 10,
								min: 1,
								max: 20
							},
							preview_color: {
								title: "背景颜色",
								type: "color",
								value: "#ffffff"
							},
						};
						break;
					case '9':
						uikey = 'U_shortvideo';
						component = '短视频';
						layout = [
							{
								title: '短视频组件配置',
								groups: [
									'preview_color',
									'list',
								]
							},
						];
						datas = {
							// preview_color: {
							// 	title: "背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#ffffff",
							},
							list: {
								title: "获取方式",
								type: "ustyle",
								value: [],
								show: 'list',
								min: 1,
								max: 100,
								choose: 'video',
								options: [
									{label: "自动获取", value: "1"},
									{label: "手动获取", value: "2"},
									{label: "选择分类", value: "3"},
								]
							},
							get_style: {
								title: "获取方式",
								type: "radio",
								value: "1",
								options: []
							},
							get_number: {
								title: "显示数量",
								type: 'number',
								value: 10,
								min: 1,
								max: 100
							},
						};
						break;
					case '10':
						uikey = 'U_community';
						component = '微社区';
						layout = [
							{
								title: '微社区组件配置',
								groups: [
									'get_number',
									'show_template',
									'preview_color',
								]
							},
						];
						datas = {
							get_number: {
								tips: '帖子显示数量最大设置为100',
								title: "帖子显示数量",
								type: 'number',
								value: 10,
								min: 1,
								max: 100
							},
							show_template: {
								title: "模板样式",
								type: "radio",
								value: "1",
								options: [
									{label: "模板一", value: "1"},
									{label: "模板二", value: "2"},
								]
							},
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#ffffff",
							},
							notShowTab: {
								title: '不显示标题栏',
								type: 'switch',
								value: true
              }
							// preview_color: {
							// 	title: "背景颜色",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: "",
               //    notShowTab: true
							// 	}
							// }
						};
						break;
					case '11':
						uikey = 'U_lottery';
						component = '幸运大转盘';
						layout = [
							{
								title: '幸运大抽奖组件配置',
								groups: [
									'preview_color',
									'lottery',
									'font_size',
									'font_color',
									'class_font_size',
									'class_font_color',
									'class_bg_color',
									'class_border_radius'
								]
							},
						];
						datas = {
							preview_color: {
								title: "背景",
								type: "bg",
								value: {
									isColor: '1',
									color: "#ED6737",
									image: ""
								}
							},
							lottery: {
								title: '抽奖活动设置',
								type: 'chooseItem',
								choose: 'lottery',
								value: {}
							},
							font_size: {
								title: "字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							font_color: {
								title: '文字颜色',
								type: 'color',
								value: '#ffffff',
							},
							class_font_size: {
								title: "中奖纪录按钮字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							class_font_color: {
								title: '中奖纪录按钮文字颜色',
								type: 'color',
								value: '#ffffff',
							},
							class_bg_color: {
								title: '中奖纪录按钮背景颜色',
								type: 'color',
								value: '#edb81c',
							},
							class_border_radius: {
								title: "中奖纪录按钮边框圆角",
								type: "bar",
								value: 0,
								min: 0,
								max: 20,
							},
						};
						break;
					case '12':
						uikey = 'U_stores';
						component = '门店';
						layout = [
							{
								title: '门店组件设置',
								groups: [
									'sort_style',
									'get_number',
									'preview_color',
									'font_size',
									'font_color',
                  'border_radius',
									'class_font_size',
									'class_font_color',
									'class_bg_color',
									'class_border_radius',
									'location_font_size',
									'location_font_color',
									'show_goods',
									// 'show_stores',
								]
							},
							{
								title: '营销活动设置',
								groups: [
									'discount_font_size',
									'discount_title_color',
									'discount_font_color',
									'discount_list',
								]
							},
							{
								title: '标签设置',
								groups: [
									'show_tag_view',
									'tag_font_size',
									'tag_font_color',
									'tag_bg_color',
									'tag_border_color',
									'tag_border_radius',
								]
							},
							{
								title: '门店数据',
								groups: [
									'list'
								]
							}
						];
						datas = {
							sort_style: {
								title: "门店排列样式",
								type: "radio",
								value: '1',
								options: [
									{ label: '默认样式', value: '1' },
									{ label: '样式一', value: '2' },
								]
							},
							get_number: {
								title: "门店显示数量",
								type: 'number',
								value: 10,
								min: 1,
								max: 100
							},
							// preview_color: {
							// 	title: "门店背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '门店背景颜色',
								type: 'color',
								value: "#ffffff",
							},
							font_size: {
								title: "门店名称字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							font_color: {
								title: '门店名称文字颜色',
								type: 'color',
								value: '#666666',
							},
							border_radius: {
								title: '门店logo圆角大小',
								type: 'bar',
								value: 5,
								min: 0,
								max: 35,
							},
							class_font_size: {
								title: "门店分类字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							class_font_color: {
								title: '门店分类文字颜色',
								type: 'color',
								value: '#ee7d07',
							},
							class_bg_color: {
								title: '门店分类背景颜色',
								type: 'color',
								value: '#ffffff',
							},
							class_border_radius: {
								title: "分类边框圆角",
								type: "bar",
								value: 5,
								min: 0,
								max: 20,
							},
							location_font_size: {
								title: "距离字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							location_font_color: {
								title: '距离文字颜色',
								type: 'color',
								value: '#666666',
							},
							discount_font_size: {
								title: "营销活动字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							discount_title_color: {
								title: '营销活动标题颜色',
								type: 'color',
								value: '#FFE51E',
							},
							discount_font_color: {
								title: '营销活动文字颜色',
								type: 'color',
								value: '#666666',
							},
							discount_list: {
								title: "营销活动内容显示",
								type: "checkbox",
								value: ['1','2','3','4'],
								options: [
									{label: "销量", value: "1"},
									{label: "赠送", value: "2"},
									{label: "抵扣", value: "3"},
									{label: "优惠券", value: "4"},
								]
							},
							show_tag_view: {
								title: "标签是否显示",
								type: "switch",
								value: true,
							},
							tag_font_size: {
								title: "标签字体大小",
								type: "bar",
								value: 12,
								min: 12,
								max: 24,
							},
							tag_font_color: {
								title: '标签文字颜色',
								type: 'color',
								value: '#f3f2f2',
							},
							tag_bg_color: {
								title: "标签背景色",
								type: "color",
								value: "#ff8400"
							},
							tag_border_color: {
								title: "标签边框颜色",
								type: "color",
								value: "#ff8400"
							},
							tag_border_radius: {
								title: "标签边框圆角",
								type: "bar",
								value: 5,
								min: 0,
								max: 20,
							},
							show_goods: {
								title: "推荐商品是否显示",
								type: "switch",
								value: true,
							},
							list: {
								title: '门店数据',
								popop_title: '选择添加门店',
								value: [],
								chooseList: {
									all: [],
									store_category: [],
								},
								chooseType: [
									{label: '全部', value: 'all', noList: true},
									{label: '选择分类', value: 'store_category'},
								],
								type: 'goodList',
								choose: 'store_category'
							},
							goods_type: {
								title: '选择类型',
								type: 'radio',
								value: 'all',
								options: []
							}
							// show_stores: {
							// 	title: "未定位是否显示门店是否显示",
							// 	type: "switch",
							// 	value: true,
							// },
						};
						break;
					case '13':
						uikey = 'U_ywmgroup';
						component = '新拼团';
						layout = [
							{
								title: '样式设置',
								groups: [
									'preview_color',
									'sort_style',
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
									'item_radius',
									'show_shadow',
									'show_border',
									'border_color',
									'good_tag',
									'button_type',
									'button_title',
									'button_bg_color',
									'button_color',
									'content_list',
									'disable_good',
								]
							},
							{
								title: '商品设置',
								groups: [
									// 'get_number',
									'list'
								]
							},
						];
						datas = {
							// preview_color: {
							// 	title: "背景",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '背景颜色',
								type: 'color',
								value: "#F1F1F1",
							},
							sort_style: {
								title: "商品排列样式",
								type: "iconbox",
								value: {
									choose_icon: '2',
								},
								choose: 'single',
								isIcon: true,
								options: [
									{icon: 'icon-ht_goods_onepic', value: '1'},
									{icon: 'icon-ht_goods_twopic', value: '2'},
									{icon: 'icon-ht_goods_vertical', value: '3'},
									{icon: 'icon-ht_goods_three', value: '4'},
									{icon: 'icon-ht_goods_threescroll', value: '5'},
									{icon: 'icon-ht_goods_threepic', value: '6'}
								]
							},
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							item_radius: {
								title: '商品圆角',
								type: 'bar',
								value: 5,
								min: 0,
								max: 50
							},
							show_shadow: {
								title: '投影',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							show_border: {
								title: '显示边框',
								type: 'switch',
								tips: '只在大图和横排排列样式下实现',
								value: false
							},
							border_color: {
								title: '边框颜色',
								type: 'color',
								value: '#BFB7B7',
							},
							good_tag: {
								title: '商品属性',
								type: "iconbox",
								tips: '商品属性统一在左上角显示',
								value: {
									choose_icon: '0',
									image: '',
								},
								choose: 'single',
								isIcon: false,
								options: [
									{label: '无', value: '0'},
									{label: '推荐', value: '1'},
									{label: '热销', value: '2'},
									{label: '新上', value: '3'},
									{label: '包邮', value: '4'},
									{label: '限时', value: '5'},
									{label: '自定义', value: '7'}
								]
							},
							button_type: {
								title: '购买按钮样式',
								tips: '选择一排三个商品的排列方式时无法选择样式一或者样式二',
								type: 'radio',
								value: '4',
								options: [
									{label: '无', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
									{label: '样式三', value: '3'},
									{label: '样式四', value: '4'},
									{label: '样式五', value: '5'},
									{label: '样式六', value: '6'},
								]
							},
							button_title: {
								title: '购买按钮文字',
								tips: '按钮文字只在选择有文字的样式时生效',
								type: 'text',
								value: '去开团'
							},
							button_bg_color: {
								title: '购买按钮背景颜色',
								type: 'color',
								value: '#ff2c29',
							},
							button_color: {
								title: '购买按钮颜色',
								type: 'color',
								value: '#ffffff',
							},
							content_list: {
								title: "内容显示",
								type: "memberCheckbox",
								from: 'group_data',
								options: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "拼团价", value: "3"},
									{label: "拼团中列表（滚动）", value: "6"}
								],
								value: [
									{label: "标题", value: "1"},
									{label: "原价", value: "2"},
									{label: "拼团价", value: "3"},
								],
								urls: [],
							},
							disable_good: {
								title: '失效产品',
								type: 'radio',
								value: '0',
								options: [
									{label: '不显示', value: '0'},
									{label: '样式一', value: '1'},
									{label: '样式二', value: '2'},
								]
							},
							// get_number: {
							// 	title: "商品显示数量",
							// 	type: 'number',
							// 	value: 1,
							// 	min: 1,
							// 	max: 100
							// },
							list: {
								title: '商品数据',
								value: [],
								chooseList: {
									ywmgroup: [],
								},
								chooseType: [
									{label: '选择拼团', value: 'ywmgroup'},
								],
								type: 'goodList',
								choose: 'ywmgroup'
							},
							goods_type: {
								title: '选择类型',
								type: 'radio',
								value: 'ywmgroup',
								options: []
							}
						};
						break;
					case '14':
						uikey = 'U_button';
						component = '按钮组';
						layout = [
							{
								title: '样式设置',
								groups: [
									'padding_top',
									'padding_bottom',
									'button_size',
									'button_margin',
									'border_radius',
									'button_number',
									'is_scroll',
									'button_line',
									'preview_color',
									'font_size',
									'text_style',
									'font_color',
									'desc_color',
									'slides_default_color',
									'slides_active_color'
								]
							},
							{
								title: '按钮组配置',
								groups: [
									'list'
								]
							},
						];
						datas = {
							list: {
								title: '按钮设置',
								type: "list",
								notShow: true,
								showDesc: true,
								choose_title: {
									choose_option: [
										{label: "普通样式", value: "1"},
										{label: "图标+文字", value: "2"},
									]
								},
								value: [
									{
										id: 1,
										image: '',
										is_minApp: '1',
										h5_link: '',
										gh_id: '',
										minApp_link: '',
										text: '文本'
									}
								]
							},
							choose_style: {
								title: '选择方式',
								type: 'radio',
								value: '2',
								options: []
							},
							padding_top: {
								title: '组件上边距',
								type: 'number',
								value: '0',
								col: 2
							},
							padding_bottom: {
								title: '组件下边距',
								type: 'number',
								value: '0',
								col: 2,
							},
							button_size: {
								title: '按钮大小',
								showTerminal: 'h5', //控制显示终端
								type: 'bar',
								value: 50,
								min: 20,
								max: 100,
							},
							button_margin: {
								title: '按钮边距(控制按钮大小)',
								showTerminal: 'cpsApp', //控制显示终端 CPS APP
								type: 'bar',
								value: 10,
								min: 0,
								max: 30,
							},
							border_radius: {
								title: '圆角大小',
								type: 'bar',
								value: 25,
								min: 0,
								max: 50,
							},
							button_number: {
								title: '按钮数量',
								type: 'radio',
								value: '4',
								options: [
									{ label: '4个按钮', value: '4' },
									{ label: '5个按钮', value: '5' },
								]
							},
							is_scroll: {
								title: '是否滑动',
								type: 'switch',
								value: false
							},
							button_line: {
								title: '按钮行数  (只有选择按钮数量为滑动时生效)',
								type: 'number',
								value: 1,
								min: 1,
								max: 3
							},
							preview_color: {
								title: "背景",
								type: "bg",
								value: {
									isColor: '1',
									color: "#ffffff",
									image: ""
								}
							},
							font_size: {
								title: "字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							text_style: {
								title: "文字样式",
								type: "textstylebox",
								value: []
							},
							font_color: {
								title: '文字颜色',
								type: 'color',
								value: '#666666',
							},
							desc_color: {
								title: '描述文字颜色',
								type: 'color',
								value: '#999999',
							},
							slides_default_color: {
								title: "分页器默认颜色",
								type: "color",
								value: "#333333"
							},
							slides_active_color: {
								title: "分页器选中颜色",
								type: "color",
								value: "#007aff"
							},
						};
						break;
					default:
						component = '无';
						uikey = 'U_article';
						return;
				}
				let item = {id: id, type_id: this.choose_type, uikey: uikey, component: component, datas: datas, layout: layout, name: '', active: true};
				for (let i = 0; i < this.tab_list.length; i++) {
          this.tab_list[i].active = false;
				}
				this.current_tab = item;
				this.tab_active = item.id;
				this.tab_list.push(item);

				this.visible = false;
			},
		}
	}
</script>
<style lang="less" scoped>
  .tab-box {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .tab-item {
    cursor: move;
    border: 1px solid #333333;
    color: #333333;
    padding: 5px 10px;
    margin: 5px;
    .close {
      cursor: pointer;
      padding: 2px 5px;
      margin-left: 5px;
    }
    &.active {
      border: 0;
      background-color: rgba(41, 186, 156, 0.15);
      color: #29ba9c;
    }
  }

  .title-box {
    display: flex;
    margin-bottom: 10px;
  }
</style>
